import styles from './index.module.scss'
import cm from 'classnames'
import { useShowLogin } from '@/utils/hooks'
import Button from '@c/button'
import { useState } from 'react'
import { goBack } from '@/utils/utils'
import { cacheLineState } from '@/store'
import { useSetRecoilState } from 'recoil'

const Index = props => {
  const { className, type = 'vod', isLive, lineStatus = {}, lineArr, clearErrorCode } = props
  const [show, setShow] = useState(false)
  const showLogin = useShowLogin()
  const updateLineState = useSetRecoilState(cacheLineState)
  const toNormal = () => {
    const firstNormalLine = lineArr.find(item => !item.isOfficial)
    if (firstNormalLine) {
      updateLineState({ ...firstNormalLine })
    }
    clearErrorCode()
  }

  return (
    <div
      className={cm(styles['error-mask'], styles[isLive ? 'live' : 'vod'], className)}
      onClick={() => setShow(!show)}
      onMouseEnter={() => setShow(true)}
      onMouseLeave={() => setShow(false)}
    >
      {lineStatus.onlyOfficial && <p className={styles.text}>该影视无普通线路，注册免费看会员线路~</p>}
      {lineStatus.both && <p className={styles.text}>注册免费看会员线路~</p>}
      {isLive && <p className={styles.text}>注册免费看电视直播~</p>}
      <Button hover="opacity" className={styles.btn} onClick={showLogin}>
        立即登录
      </Button>
      {lineStatus.both && (
        <p className={styles.normal} onClick={toNormal}>
          起播普通线路
          <span className="text-white-60">
            {'('}多广告{')'}
          </span>
        </p>
      )}
      <div className={cm(styles.backBox, 'hideWhenPhone')}>
        <div
          className={cm(styles.backToBox, {
            [styles.backToPhone]: true
          })}
        >
          <Button className={styles.backTo} onClick={goBack}>
            <img loading="lazy" src="/images/play-back.png" alt="返回" />
          </Button>
        </div>
      </div>
    </div>
  )
}

export default Index
